---
# title: "Ring Offset Width"
title: "轮廓环偏移厚度"
# description: "Utilities for simulating an offset when adding outline rings."
description: "当添加轮廓环时，用于模拟偏移的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/ringOffsetWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  transformProperties: ({ selector, properties }) => {
    properties['box-shadow'] = `0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)`
    return properties
  }
}


<!-- ## Usage -->
## 使用

<!-- Use the `ring-offset-{width}` utilities to simulate an offset by adding solid white box-shadow and increasing the thickness of the accompanying outline ring to accommodate the offset. -->
使用 `ring-offset-{width}` 功能来模拟偏移，添加纯白色的盒状阴影，并增加相应的轮廓环的厚度以适应偏移。

```html fuchsia
<template preview class="p-0 border -mb-px">
  <div class="bg-white grid grid-cols-1 sm:grid-cols-3 gap-6 justify-items-center p-8 ">
    <button tabindex="-1" class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-0">
      ring-offset-0
    </button>
    <button tabindex="-1" class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-2">
      ring-offset-2
    </button>
    <button tabindex="-1" class="focus:outline-none text-sm w-32 py-3 rounded-md font-semibold text-white bg-pink-500 ring ring-pink-600 ring-offset-4">
      ring-offset-4
    </button>
  </div>
</template>

<button class="... ring ring-pink-600 **ring-offset-0**">ring-0</button>
<button class="... ring ring-pink-600 **ring-offset-2**">ring-2</button>
<button class="... ring ring-pink-600 **ring-offset-4**">ring-4</button>
```

### Changing the offset color（改变偏移颜色）

<!-- You can't actually offset a box-shadow in CSS, so we have to fake it using a solid color shadow that matches the parent background color. We use white by default, but if you are adding a ring offset over a different background color, you should use the `ring-offset-{color}` utilities to match the parent background color: -->
在 CSS 中，您不能真正地偏移一个方框阴影，所以我们必须使用一个与父背景色相匹配的纯色阴影来伪造它。我们默认使用白色，但是如果您在不同的背景色上添加一个环形偏移，您应该使用 `ring-offset-{color}` 功能来匹配父背景色。

```html emerald
<template preview class="p-0">
  <div class="bg-emerald-100 grid grid-cols-1 gap-6 justify-items-center p-8 ">
    <p class="font-semibold text-emerald-600">bg-green-100</p>
    <button tabindex="-1" class="focus:outline-none text-sm px-5 py-3 rounded-md font-semibold text-white bg-emerald-500 ring ring-emerald-600 ring-offset-4 ring-offset-emerald-100">
      ring-offset-green-100
    </button>
  </div>
</template>

<div class="... **bg-green-100**">
  <button class="... ring ring-green-600 **ring-offset-4** **ring-offset-green-100**">
    ring-offset-green-100
  </button>
</div>
```

<!-- For more information, see the [ringOffsetColor documentation](/docs/ring-offset-color). -->
更多信息，请参见[ ringOffsetColor 文档](/docs/ring-offset-color)。

---


<!-- ## Responsive

To control the ring offset width at a specific breakpoint, add a `{screen}:` prefix to any existing ring offset width utility. For example, use `md:ring-offset-4` to apply the `ring-offset-4` utility at only medium screen sizes and above. -->
## 响应式

要控制特定断点处的环形偏移宽度，请在任何现有的环形偏移宽度功能中添加 `{screen}:` 前缀。例如，使用 `md:ring-offset-4` 来应用 `ring-offset-4` 功能，只适用于中等大小的屏幕及以上。

```html
<button class="ring-2 ring-offset-2 **md:ring-offset-4**">
  <!-- ... -->
</button>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

---

<!-- ## Customizing -->
## 自定义

<!-- To customize which ring offset width utilities are generated, add your custom values under `ringOffsetWidth` key in the `theme` section of your `tailwind.config.js` file. -->
您可以通过在您的 `tailwind.config.js` 文件的 `theme` 部分的 `ringOffsetWidth` 键下自定义您的环形偏移宽度功能。

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringOffsetWidth: {
        '3': '3px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于定制默认主题的信息。

<!-- ### Variants -->
###  变体

<Variants plugin="ringOffsetWidth" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="ringOffsetWidth" />
